<template>
  <div class="article-card" @click="toArticle">
      <section class="preview-image-container">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://young-1306090592.cos.ap-guangzhou.myqcloud.com/mental-app/mmexport1635914832457.jpg"
        />
      </section>
      <section class="article-introduce-wrapper clicked">
        <span class="title">坚持一个小习惯，让你变得积极乐观</span>
        <span class="abstract">最近，你遇到了什么难题呢？生活中难免会遇到各种困难：失恋、考试失败、错失机会......悲观的原因往往是长期遭受</span>
      </section>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const toArticle = articleId => {
  router.push({
    name: 'Article',
    params: { articleId }
  })
}
</script>

<style scoped lang="scss">
.article-card {
  width: 100%;
  height: 250px;
  border: 0.5px solid #888;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
  &:hover {
    background: #e6e6e6;
  }
  .preview-image-container {
    height: 150px;
  }
  .article-introduce-wrapper {
    height: 100px;
    box-sizing: border-box;
    padding: 10px 15px;
    .title {
      display: block;
      font-size: 14px;
      box-sizing: border-box;
      padding: 5px 0;
    }
    .abstract {
      display: block;
      font-size: 12px;
      color: #727272;
      box-sizing: border-box;
      padding: 5px 0;
    }
  }
}
</style>
